<template>
<el-dialog title="发表图文" :visible.sync="dialogFormVisible" class="publish-box">
  <el-form ref="form" :model="form" label-position="top">
    <el-form-item>
      <el-upload
      with-credentials
      ref="upload"
      :headers="uploadHeaders"
       accept="image/*"
       action="/api/media/upload"
       :on-success="handleSuccess"
       list-type="picture-card"
       :auto-upload="false" :limit="9">
        <i class="el-icon-plus"></i>
      </el-upload>
    </el-form-item>
    <el-form-item label="标签">
      <el-tag :key="tag" v-for="tag in form.tags" closable :disable-transitions="false" @close="handleClose(tag)">
        {{tag}}
      </el-tag>
      <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
      </el-input>
      <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 标签</el-button>
    </el-form-item>
    <el-form-item label="附言">
      <el-input :maxlength="240" :rows="4" v-model="form.article" type="textarea" />
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="handleSubmit">确 定</el-button>
  </div>
</el-dialog>
</template>

<script>
export default {
  name: 'Presion',
  data() {
    return {
      dialogFormVisible: false,
      inputVisible: false,
      inputValue: '',
      form: {
        article: '',
        tags: [],
        pictures: [],
      },
    };
  },
  computed: {
    uploadHeaders() {
      return {
        'x-csrf-token': this.$store.state.glob.csrf,
      };
    },
  },
  methods: {
    handleSubmit() {
      if (this.$refs.upload.uploadFiles.length > 0) {
        this.form.pictures = [];
        this.$refs.upload.submit();
      } else if (this.form.article) {
        this.handlePublish();
      } else {
        console.log('error submit!!');
        return false;
      }
    },
    showInput() {
      this.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    handleClose(tag) {
      this.form.tags.splice(this.form.tags.indexOf(tag), 1);
    },
    handleInputConfirm() {
      const inputValue = this.inputValue;
      if (inputValue) {
        this.form.tags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = '';
    },
    handleSuccess(res, file, fileList) {
      this.form.pictures.push(res.data);
      if (this.form.pictures.length === fileList.length) {
        this.handlePublish();
      }
    },
    handlePublish() {
      const { article, pictures, tags } = this.form;
      this.$http.post('/social/publish', {
        article, pictures, tags,
      })
        .then(() => {
          this.$notify({
            title: '成功',
            message: '发布成功',
            type: 'success',
          });
          this.$store.dispatch('getArticleList');
          this.dialogFormVisible = false;
        });
    },
    show() {
      this.form = {
        article: '',
        tags: [],
        pictures: [],
      };
      this.$refs.upload && this.$refs.upload.clearFiles();
      this.dialogFormVisible = true;
    },
  },
};
</script>

<style lang="scss">
.publish-box {
  .el-upload--picture-card,
  .el-upload-list__item {
    width: 80px;
    height: 80px;
    line-height: 88px;
  }
  .el-tag+.el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
}
</style>

